import { UserProfile } from '@entities/User'
import { useAppSelector } from '@shared/lib/hooks/redux'
import { useResize } from '@shared/lib/hooks/useResize'
import { CurrentDate } from '@shared/ui/CurrentDate'
import { Panel } from '@shared/ui/Panel'
import { Search } from '@shared/ui/Search'
import { NotificationButton } from '@widgets/NoitificationButton'
import styles from './Header.module.scss'

export const Header = () => {
  const user = useAppSelector((state) => state.user)
  const { isScreenXl } = useResize()
  return (
    <header className={styles.header}>
      <Panel borderRadius='main' className={styles.wrapper} withShadow withoutHover>
        <Search delay={200} placeholder='Поиск...' />
        <div className={styles.date}>{isScreenXl && <CurrentDate />}</div>
        <div className={styles['user-wrapper']}>
          <NotificationButton />
          {user && <UserProfile />}
        </div>
      </Panel>
    </header>
  )
}
